<template>
  <div class="data-table">
    <section class="dataScreen-box">
      <header class="theme">
        <h4>创建问题总量 : {{ allListData.length }}</h4>
      </header>
      <div class="dataScreen-echarts" style="width: 1000px" ref="dataScreenRef"></div>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { onMounted ,ref} from 'vue'

import { store } from '@/store/issues'
import { storeToRefs } from 'pinia'
import * as echarts from 'echarts'
import { IProblems } from '../../config/problems'

const issueStore = store()
const { allListData } = storeToRefs(issueStore)
const dataScreenRef = ref<HTMLElement>()

/**
 * @desc: 配置echarts
 * @return {*}
 */
 interface IssuesDataNum {
  notSpecifyNum: IProblems[] // 不指定
  seriousNum: IProblems[] // 严重
  mainNum: IProblems[] // 主要
  secondaryNum: IProblems[] // 次要
  unimportanceNum: IProblems[] // 不重要
}
const IssuesDataNum = ref<IssuesDataNum>({
  notSpecifyNum: [],
  seriousNum: [],
  mainNum: [],
  secondaryNum: [],
  unimportanceNum: []
})
const getStaticData = (item: IProblems[]) => {
  IssuesDataNum.value = {
    notSpecifyNum: [],
    seriousNum: [],
    mainNum: [],
    secondaryNum: [],
    unimportanceNum: []
  }
  for (let i = 0; i < item.length; i++) {
    switch (item[i].priority) {
      case '不指定':
        IssuesDataNum.value.notSpecifyNum.push(item[i])
        break
      case '严重':
        IssuesDataNum.value.seriousNum.push(item[i])
        break
      case '主要':
        IssuesDataNum.value.mainNum.push(item[i])
        break
      case '次要':
        IssuesDataNum.value.secondaryNum.push(item[i])
        break
      case '不重要':
        IssuesDataNum.value.unimportanceNum.push(item[i])
        break
    }
  }
}
onMounted(() => {
  issueStore.getData() //获取所有问题

  let allTodoListData: IProblems[] = []
  let allDoneListData: IProblems[] = []
  let allDoingListData: IProblems[] = []
  let allRefuseListData: IProblems[] = []
  for (let i = 0; i < allListData.value.length; i++) {
    switch (allListData.value[i].is_status) {
      case '待办的':
        allTodoListData.push(allListData.value[i])
        break
      case '已完成':
        allDoneListData.push(allListData.value[i])
        break
      case '进行中':
        allDoingListData.push(allListData.value[i])
        break
      case '已拒绝':
        allRefuseListData.push(allListData.value[i])
        break
    }
  }
  getStaticData(allTodoListData)
  const todoListData = ref(IssuesDataNum.value)

  getStaticData(allDoneListData)
  const doneListData = ref(IssuesDataNum.value)

  getStaticData(allDoingListData)
  const doingListData = ref(IssuesDataNum.value)

  getStaticData(allRefuseListData)
  const refuseListData = ref(IssuesDataNum.value)

  const myChart = echarts.init(dataScreenRef.value!, 'light', {
    renderer: 'svg'
  })
  const option = {
    tooltip: {
      left: 'right',
      trigger: 'axis'
    },
    legend: {
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 43.5,
      right: '10%',
      selectedMode: true,
      rich: {
        a: {
          fontSize: 14,
          lineHeight: 24,
          fontWeight: 400,
          fontStyle: 'normal',
          fontFamily: 'Source Han Sans CN',
          color: '#73767A',
          padding: [25, 0, 0, 8]
        },
        b: {
          color: '#000000',
          fontFamily: 'Source Han Sans CN',
          fontStyle: 'normal',
          fontWeight: 700,
          fontSize: 18,
          lineHeight: 24,
          padding: [28, 0, 0, 8]
        }
      }
    },
    grid: {
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['不指定', '严重', '主要', '次要', '不重要'],
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#ADD4F9'
          }
        },
        axisLabel: {
          show: true,
          color: '#333333',
          fontFamily: 'Source Han Sans CN',
          fontStyle: 'normal',
          fontWeight: 400,
          fontsize: 14,
          lineHeight: 24
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '待办的',
        type: 'bar',
        barWidth: 12,
        barGap: '60%',
        barCategoryGap: '50%',
        itemStyle: {
          color: '#C6E2FF',
          borderRadius: [5, 5, 5, 5]
        },
        label: {
          show: true,
          position: 'top'
        },
        data: [
          todoListData.value?.notSpecifyNum.length ?? 0,
          todoListData.value?.seriousNum.length ?? 0,
          todoListData.value?.mainNum.length ?? 0,
          todoListData.value?.secondaryNum.length ?? 0,
          todoListData.value?.unimportanceNum.length ?? 0
        ]
      },
      {
        name: '进行中的',
        type: 'bar',
        barWidth: 12,
        itemStyle: {
          color: '#409EFF',
          borderRadius: [5, 5, 5, 5]
        },
        label: {
          show: true,
          position: 'top'
        },
        data: [
          doingListData.value?.notSpecifyNum.length ?? 0,
          doneListData.value?.seriousNum.length ?? 0,
          doneListData.value?.mainNum.length ?? 0,
          doneListData.value?.secondaryNum.length ?? 0,
          doneListData.value?.unimportanceNum.length ?? 0
        ]
      },
      {
        name: '已完成的',
        type: 'bar',
        barWidth: 12,
        itemStyle: {
          color: '#95d475',
          borderRadius: [5, 5, 5, 5]
        },
        label: {
          show: true,
          position: 'top'
        },
        data: [
          doneListData.value?.notSpecifyNum.length ?? 0,
          doneListData.value?.seriousNum.length ?? 0,
          doneListData.value?.mainNum.length ?? 0,
          doneListData.value?.secondaryNum.length ?? 0,
          doneListData.value?.unimportanceNum.length ?? 0
        ]
      },
      {
        name: '已拒绝的',
        type: 'bar',
        barWidth: 12,
        itemStyle: {
          color: '#f25656de',
          borderRadius: [5, 5, 5, 5]
        },
        label: {
          show: true,
          position: 'top'
        },
        data: [
          refuseListData.value?.notSpecifyNum.length ?? 0,
          refuseListData.value?.seriousNum.length ?? 0,
          refuseListData.value?.mainNum.length ?? 0,
          refuseListData.value?.secondaryNum.length ?? 0,
          refuseListData.value?.unimportanceNum.length ?? 0
        ]
      }
    ]
  }
  myChart.setOption(option)
})
</script>

<style lang="less" scoped>
.data-table {
  border: 1px solid rgb(235, 235, 235);
  border-radius: 4px;
  padding: 20px;
  .user-info-warp {
    .info-title {
      display: flex;
      align-items: center;
      padding-bottom: 3px;
      p {
        padding-left: 5px;
      }
    }
  }
  .solved-num,
  .liked-num,
  .created-num,
  .top {
    font-size: 16px;
  }
  .solved-num {
    color: #fe7a15;
  }
  .liked-num {
    color: #fe7a15;
  }
  .created-num {
    color: #fe7a15;
  }
  .top {
    display: flex;
    align-items: center;
    color: rgba(242, 86, 86, 0.872);
    .top-color-icon {
      width: 30px;
      height: 30px;
      padding-left: 5px;
    }
  }
  height: 500px;

  .dataScreen-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .theme {
      color: rgb(68, 151, 254);
      font-size: 17px;
      font-weight: bold;
      text-align: left;
      line-height: 30px;
      padding-bottom: 30px;
      h4 {
        box-sizing: border-box;
      }
    }
    .dataScreen-echarts {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
